import React, { useState, useEffect } from 'react';
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons';
import { Row, Col, message } from 'antd';
import { history, useLocation } from '@umijs/max';
import ArticleItem from '@/components/ArticleItem';
import type { Location } from 'history';
import useRequest from '@ahooksjs/use-request';
import styles from './index.less';
import { findArticleListByTitleEs } from '@/services/articles';

type LocationState = {
  searchStr?: string;
};
const Index: React.FC = () => {
  const [isCol, setIsCol] = useState<boolean>(false);
  const [articleList, setArticleList] = useState<ARTICLEAPI.EsArticle[]>([]);
  const { state } = useLocation() as unknown as Location & { state: LocationState };
  const { run: findArticleListByTitleEsRun } = useRequest(findArticleListByTitleEs, {
    debounceInterval: 300,
    manual: true,
    onSuccess: (res) => {
      const { code, data: { records = [] } = {}, message: errorMessage } = res;
      if (code === 200) {
        setArticleList(records);
      } else {
        message.error(errorMessage);
      }
    },
  });
  useEffect(() => {
    if (state && state.searchStr) {
      findArticleListByTitleEsRun({ current: 1, pageSize: 10, articleTitle: state.searchStr });
    }
  }, [state]);
  return (
    <div className={styles.homeWrapper}>
      <Row className={styles.label}>
        <Col span={4} className={styles.tab} onClick={() => history.push('home')}>
          <span>后端</span>
          <b>4</b>
        </Col>
        <Col data-menu="web" span={4} className={styles.tab}>
          前端
        </Col>
        <Col data-menu="JAVA" span={4} className={styles.tab}>
          JAVA
        </Col>
        <Col data-menu="React" span={4} className={styles.tab}>
          React
        </Col>
        <Col data-menu="Vue" span={4} className={styles.tab}>
          Vue
        </Col>
      </Row>
      <div className={styles.iconList}>
        {/* <MenuOutlined className={styles.iconStyle} /> */}
        <UnorderedListOutlined onClick={() => setIsCol(false)} className={styles.iconStyle} />
        <AppstoreOutlined onClick={() => setIsCol(true)} className={styles.iconStyle} />
      </div>
      <div className={isCol ? styles.articleListCol : styles.articleListRow}>
        <ArticleItem listData={articleList} />
      </div>
    </div>
  );
};

export default Index;
